<template>
  <div class="upload-demo">
    <el-form ref="form" :model="form" label-width="80px">
      <el-upload
        v-model="fileList"
        :data="dataObj"
        class="upload"
        drag
        action="http://print-bucket.oss-cn-chengdu.aliyuncs.com"
        :multiple="false"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传wrod/pdf/jpg/png文件，且不超过10Mb
        </div>
      </el-upload>
      <div v-show="show">
        <el-form-item label="文件名 ">
          <span>{{ form.name }}</span>
        </el-form-item>
        <el-form-item label="打印类型">
          <el-radio-group v-model="form.type">
            <el-radio label="0">单面</el-radio>
            <el-radio label="1">双面</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="打印份数">
          <el-input v-model="form.copies"></el-input>
        </el-form-item>
        <el-form-item label="页  数">
          <span>{{ form.page }}</span>
        </el-form-item>
        <el-form-item label="价 格">
          <span>{{ (form.page * form.copies * 0.2) | numFilter }}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goPrint">立即打印</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>



<script>
import { policy } from "../api/policy";
import { SaveOrder } from "../api/order";

export default {
  data() {
    return {
      show: false,
      fileList: [],
      form: {
        name: "",
        type: "",
        copies: "",
        page: "",
        prices: "",
        uid: "",
      },
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        // callback:'',
      },
    };
  },

  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位

      let realVal = Number(value).toFixed(2);

      // num.toFixed(2)获取的是字符串

      return Number(realVal);
    },
  },

  methods: {
    onSuccess(response, file, fileList) {
      console.log("上传成功");
      this.form.name = file.name;
      //this.form.pages="10";
      this.form.type = "0";
      this.form.copies = "1";
      this.show = true;
      return this.$confirm(`上传成功 ${file.name}`);
      //console.log(file.name)
    },

    goPrint() {
      // let formData = new FormData()
      // let file = this.fileList[0].file
      // formData.append("file", file, file.name)

      if (this.form.copies == 0)
        return this.$message.error("打印份数不能为0！");
      if (this.form.copies > 10) return this.$message.error("最多打印10份哦！");
      this.form.prices = this.form.page * this.form.copies * 0.2;
      this.form.uid = localStorage.getItem("uphone");
      console.log("表单信息");
      console.log(this.form);
      SaveOrder(this.form).then((res) => {
        if (res.data.code && res.data.code == 200) {
          this.$message({
            message: "打印成功！",
            type: "success",
          });
          this.$router.push("/order");
        } else {
          this.$message.error("发生错误请重新打印");
        }
      });
    },
    beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        policy()
          .then((response) => {
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir + "${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            console.log("响应的数据", _self.dataObj);
            this.form.page = response.data.page;
            resolve(true);
          })
          .catch((err) => {
            reject(false);
          });
      });
    },
  },
};
</script>

<style scoped>
.upload-demo {
  position: absolute; /* 相对定位或绝对定位均可 */
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.upload {
  right: 100px;
  height: 250px;
}
</style>